<script>
export default {
  name: 'marked-essay',
  props: {
    fileName: {
      type: String,
      required: true
    },
    more: {
      type: Boolean,
      default: false
    },
    showMoreStyle: {
      type: Function
    },
    splitWord: {
      type: String,
      default: '<!-- more -->'
    }
  },
  data() {
    return {
      articleHTML: ''
    }
  },
  computed: {
    renderHtml() {
      if (!this.more) return this.articleHTML

      return this.articleHTML.split(this.splitWord)[0]
    }
  },
  render(h) {
    const children = [
      h(
        'div',
        {
          domProps: {
            innerHTML: this.renderHtml
          }
        }
      )
    ]

    if (this.more) {
      let moreStyle = h(
        'div',
        [
          h(
            'a',
            {
              attrs: {
                href: 'javascript:;',
                title: 'more'
              },
              on: {
                click: this.handleCheck
              }
            },
            'more>>'
          )
        ]
      )
      if (this.showMoreStyle) moreStyle = this.showMoreStyle(h)

      children.push(moreStyle)
    }

    return h(
      'div',
      {
        class: 'marked-essay'
      },
      children
    )
  },
  mounted() {
    if (this.fileName) {
      import(
        /* webpackChunkName: 'articles/article' */ 
        `../articles/${this.fileName}`
      )
        .then(({ default: html }) => {
          this.articleHTML = html
        })
    }
  },
  methods: {
    handleCheck() {
      this.$emit('check-more', this.fileName)
    }
  }
}
</script>
